<template>
  <div class="shop">
    <div class="news_top">
      <div class="news_note">
        <p>温馨提示：</p>
        <p>必须填写【模版ID】才能开启模版消息推送状态</p>
        <p>【模版ID】请到 微信公众平台 >> 模版消息 >> 模版库 选择对应【模版编号】的模版，然后获取【模版ID】填写到此处</p>
        <p>以下所有模版均属于：“it科技/互联网|电子商务”，“其他|其他”</p>
      </div>
    </div>
    <el-button class="addBtn" type="primary" @click="isShowtemplate = true">新增模版消息</el-button>
    <el-table
      :data="tableData"
      class="template_message_table"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="template_id" label="模版ID"></el-table-column>
      <el-table-column prop="template_name" label="模版名称"></el-table-column>
      <el-table-column prop="template_content" label="回复内容"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <p class="status—desc" v-if="scope.row.status == '1'">开启</p>
          <p class="status—desc" v-else>关闭</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editNews(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteNews(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <jdialog title="新增模版消息" :visible.sync="isShowtemplate" width="600px">
      <el-form class="add_moban_form">
        <el-form-item label="模版id  ">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版id"
            v-model="form.template_id"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="模版名称">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版名称"
            v-model="form.template_name"
          ></el-input>
        </el-form-item>

        <el-form-item label="模版内容">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版内容"
            v-model="form.template_content"
          ></el-input>
        </el-form-item>

        <el-form-item label="模版跳转链接">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版跳转链接"
            v-model="form.template_page"
          ></el-input>
        </el-form-item>
      </el-form>
      <div  class="dialog-footer">
        <el-button size='mini' @click="isShowtemplate = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="addTemplate">确 定</el-button>
      </div>
    </jdialog>

    <jdialog title="修改模版消息" :visible.sync="isEdittemplate" width="600px">
       <el-form class="add_moban_form">
        <el-form-item label="模版id">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版id"
            v-model="editform.template_id"
            maxlength="20"
            :disabled="true"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="模版名称">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版名称"
            v-model="editform.template_name"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="模版内容">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版内容"
            v-model="editform.template_content"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="模版跳转链接">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入模版跳转链接"
            v-model="editform.template_page"
          ></el-input>
        </el-form-item>
      </el-form>

      <div  class="dialog-footer">
        <el-button size='mini' @click="isEdittemplate = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="EditTemplateNews">确 定</el-button>
      </div>
    </jdialog>

  </div>
</template>

<script>
import {
  noticeTemplateMessagelist,
  noticeTemplatemessageEnable,
  noticeTemplatemessageDisable,
  noticeTemplatemessageDelete,
  noticeTemplateMessageCreate,
  noticeTemplateMessageUpdate
} from "@/api/setting";

export default {
  data() {
    return {
      isShowtemplate: false,
      isEdittemplate: false,
      tableData: [],
      form: {
        template_id: "",
        template_name: "",
        template_content: "",
        template_page: ""
      },
      editform: {}
    };
  },
  mounted() {
    this.getnoticeTemplateMessagelist();
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    //获取模版消息列表
    async getnoticeTemplateMessagelist() {
      let res = await noticeTemplateMessagelist();
      this.tableData = res.data;
    },

    //更改小店禁用状态
    isUseActivityChange(id, e) {
      if (e === 1) {
        this.getnoticeTemplatemessageEnable(id + "");
      } else {
        this.getnoticeTemplatemessageDisable(id + "");
      }
    },
    deleteNews(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.getnoticeTemplatemessagedelete(id + "");
      });
    },
    editNews(obj) {
      this.isEdittemplate = true;
      this.editform = obj;
    },
    async getnoticeTemplatemessageEnable(url) {
      let res = await noticeTemplatemessageEnable(url);
      console.log(res);
      if (res.code === 10000) {
        this.$message.success("开启成功");
        this.getnoticeTemplateMessagelist();
      } else {
        this.$message.error(res.message);
      }
    },
    async getnoticeTemplatemessageDisable(url) {
      let res = await noticeTemplatemessageDisable(url);
      if (res.code === 10000) {
        this.$message.success("关闭成功");
        this.getnoticeTemplateMessagelist();
      } else {
        this.$message.error(res.message);
      }
    },
    async getnoticeTemplatemessagedelete(url) {
      let res = await noticeTemplatemessageDelete(url);
      if (res.code === 10000) {
        this.$message.success("删除成功");
        this.getnoticeTemplateMessagelist();
      } else {
        this.$message.error(res.message);
      }
    },
    addTemplate() {
      if (this.form.template_id.length === 0) {
        this.$message.error("模版id不能为空");
        return;
      }
      if (this.form.template_name.length === 0) {
        this.$message.error("模版名称不能为空");
        return;
      }
      if (this.form.template_content.length === 0) {
        this.$message.error("模版内容不能为空");
        return;
      }
      if (this.form.template_page.length === 0) {
        this.$message.error("模版跳转链接不能为空");
        return;
      }
      this.getnoticeTemplateMessageCreate();
    },
    async getnoticeTemplateMessageCreate() {
      let res = await noticeTemplateMessageCreate(this.form);
      if (res.code === 10000) {
        this.$message.success("成功添加模版消息");
        this.isShowtemplate = false;
        this.getnoticeTemplateMessagelist();
      } else {
        this.$message.error(res.message);
      }
    },
    EditTemplateNews() {
      this.getnoticeTemplateMessageUpdate();
    },

    async getnoticeTemplateMessageUpdate() {
      let res = await noticeTemplateMessageUpdate(
        "" + this.editform.id,
        this.editform
      );
      if (res.code === 10000) {
        this.$message.success("成功修改模版消息");
        this.isEdittemplate = false;
        this.getnoticeTemplateMessagelist();
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .news_top {
    background-color: #e6e6e6;
    margin-bottom: 16px;
    .news_note {
      padding: 20px;

      p {
        margin-bottom: 10px;
      }
    }
  }
  .template_message_table {
    margin-top: 70px;
  }
  .addBtn {
    float: right;
  }
  .add_moban_form{
    padding: 20px 20px 0;
  }
  .dialog-footer{
    margin: 20px 0;
    text-align: center;
  }
}
</style>